<!--图书管理-->
<template>
  <div>
    <div class="bread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/managerMain' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>图书管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--返回顶部-->
    <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
    <!--新增和查询-->
    <el-row type="flex" style="margin-bottom: 15px;">
        <div style="padding: 10px 0;">
            <el-col :span="4" push="3">
              <template>
                <el-select v-model="value" clearable placeholder="请选择搜索类型" aligin="center" >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-col>
            <el-col :span="8" push="3" >
                <el-input v-model="searchContent" placeholder="请输入需要搜索书的相关信息" align="center" prefix-icon="el-icon-search" ></el-input>
            </el-col>
            <el-col :span="3" push="3">
                <el-button type="primary" @click="search" round >搜索</el-button>
            </el-col>
            <el-col :span="3" push="3">
                <el-button type="primary" @click="dialogAddVisible = true" style="margin-left:270px">新增<i class="el-icon-circle-plus-outline"></i></el-button>
            </el-col>
            <!--新增卡片-->
            <el-dialog title="新增图书" :visible.sync="dialogAddVisible" width="420px">
                <!--表单部分-->
                <el-form  :inline="true" :label-position="left" label-width="80px" :model="addData">
                <el-form-item label="ISBN">
                <el-input v-model="addData.isbn"></el-input>
              </el-form-item>
              <el-form-item label="书名">
                <el-input v-model="addData.bname" ></el-input>
               </el-form-item>
              <el-form-item label="作者">
                <el-input v-model="addData.author" ></el-input>
              </el-form-item>
              <el-form-item label="图片url">
              <el-input type="textarea" v-model="addData.url"></el-input>
              </el-form-item>
              <el-form-item label="价格" >
                <el-input-number v-model="addData.price" :precision="2" :step="0.1" :min="0"></el-input-number>
              </el-form-item>
              <el-form-item label="库存" >
                <template>
                    <el-input-number  v-model="addData.inventory" :precision="0" :min="0"></el-input-number>
                </template>
              </el-form-item>
              <el-form-item label="介绍">
              <el-input type="textarea" v-model="addData.introduction"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="clear">取 消</el-button>
              <el-button type="primary" @click="addBook">新增</el-button>
            </div>
            </el-dialog>
             <!--编辑卡片-->
            <el-dialog title="编辑图书" :visible.sync="dialogTableVisible" width="420px">
                <!--表单部分-->
                <el-form  :inline="true" :label-position="left" label-width="50px" :model="gridData">
                <el-form-item label="ISBN">
                <el-input v-model="gridData.ISBN" disabled></el-input>
              </el-form-item>
              <el-form-item label="书名">
                <el-input v-model="gridData.bname" disabled></el-input>
               </el-form-item>
              <el-form-item label="作者">
                <el-input v-model="gridData.author" disabled ></el-input>
              </el-form-item>
              <el-form-item label="价格" >
                <el-input-number v-model="gridData.price" :precision="2" :step="0.1" :min="0" disabled></el-input-number>
              </el-form-item>
              <el-form-item label="库存" >
                <template>
                    <el-input-number  v-model="gridData.inventory" :precision="0" :min="0"></el-input-number>
                </template>
              </el-form-item>
              <el-form-item label="介绍">
              <el-input type="textarea" v-model="gridData.introduction" disabled></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="clear">取 消</el-button>
              <el-button type="primary" @click="editBook">确认</el-button>
            </div>
            </el-dialog>
        </div>
    </el-row>
    <!--图书表格-->
    <el-table :data="bookTable"  stripe style="width: 100%" >
      <el-table-column prop="ISBN" label="ISBN" width="150" align="center"></el-table-column>
      <el-table-column prop="bname" label="书名" width="150" align="center"></el-table-column>
      <el-table-column prop="author" label="作者" width="150" align="center"></el-table-column>
      <el-table-column prop="price" label="价格" width="100" align="center"></el-table-column>
      <el-table-column prop="inventory" label="库存" widt="50" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <temple slot-scope="scope">
            <template>
            <el-popconfirm confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info" icon-color="red" title="确定删除此书？" @confirm="deletebyIsbn(scope.row.ISBN)">
            <el-button slot="reference" type="danger"  round style="margin-right:5px">删除<i class="el-icon-delete"></i></el-button>
            </el-popconfirm>
          </template>
          <el-button type="success"  round @click="bookDetails(scope.row.ISBN)">编辑<i class="el-icon-edit"></i></el-button>
        </temple>
      </el-table-column>
    </el-table>
    <!--分页功能-->
    <div style="margin-top:20px;">
      <h>共{{total}}条</h>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "orderManage",
  data() {
    return {
      //分页查询变量
      total: 0,
      //搜索内容
      searchContent:'',
      //表格变量
      bookTable:[],//存放各个书数据
      //嵌套表格变量
      gridData: {},//存放单个书详细数据进行编辑
      addData: {
          isbn:'',
          bname:'',
          author:'',
          price:0.00,
          inventory:0,
          url:'',
          introduction:''
      },//新增
      //新增卡片可见
      dialogAddVisible:false,
      //编辑卡片可见
      dialogTableVisible: false,
      //页面装饰变量
      headerBg: 'headerBg',
      options: [{
          value: "1",
          label: 'ISBN'
        }, {
          value: "2",
          label: '作者'
        }, {
          value: "3",
          label: '书名'
        }],
        value:"",
        nextProjectForm: {
        publicWelfareUrl: "",
      },
    }
  },
  created() {
    this.load()
  },
  computed: {
    ...mapGetters(["fileUpload", "token"])
  },
  methods:{
    load() {
      //url为获取整个图书列表
      this.$axios.get("http://localhost:9090/book/")
        .then(res =>{
          console.log(res.data);
          if(res.data.code=="200")
          //赋值
          {this.bookTable=res.data.data;
          this.total=this.bookTable.length;}
          else
          {
            this.$message({
							message:res.data.msg,
							type:'error'
							});
          }
        })
    },
    //clear
    clear(){
        this.dialogAddVisible=false;
        this.dialogTableVisible=false;
        this.addData.isbn=this.addData.bname=this.addData.author=this.addData.introduction=this.addData.url='';
        this.addData.price=0.00;
        this.addData.inventory=0;
        this.gridData={};
    },
    //根据关键词搜索 看看返回吧
    search(){
      if(this.value==""||this.searchContent=="")
      {
        this.$message({
							message:"请选择关键词类型并且输入搜索内容",
							type:'error'
							});
      }
      else{
        console.log(this.value);
        //ISBN
        if(this.value=="1")
        {
          console.log("ISBN");
          var isbn=parseInt(this.searchContent);
          //int isbn=intof(this.searchContent);
          console.log(isbn);
          this.$axios.get(`http://localhost:9090/book/findbyISBN?ISBN=${isbn}`,{ISBN:isbn})
          .then(res=>{
            if(res.data.code==="200")
            {
              this.$message({
							message:"搜索内容如下",
							type:'success'
							});
              this.bookTable=res.data.data;
            }
            else{
              this.$message({
							message:res.data.msg,
							type:'error'
							});
            }
          })
        }
        else if(this.value=="2")
        {
           this.$axios.get(`http://localhost:9090/book/findbyauthor?author=${this.searchContent}`,{author:JSON.stringify(this.searchContent)})
          .then(res=>{
            if(res.data.code==="200")
            {
              this.$message({
							message:"搜索内容如下",
							type:'success'
							});
              this.bookTable=res.data.data;
              this.total=this.bookTable.length;
            }
            else{
              this.$message({
							message:res.data.msg,
							type:'error'
							});
            }
          })
        }
        else{
           this.$axios.get(`http://localhost:9090/book/findbybname?bname=${this.searchContent}`,{bname:JSON.stringify(this.searchContent)})
          .then(res=>{
            if(res.data.code==="200")
            {
              this.$message({
							message:"搜索内容如下",
							type:'success'
							});
              this.bookTable=res.data.data;
            }
            else{
              this.$message({
							message:res.data.msg,
							type:'error'
							});
            }
          })
        }
      }
    },
    //图书详情
    bookDetails(ISBN){
      this.dialogTableVisible=true;
      //this.dialogTableVisible=true;
      //通过ISBN获取detail的url
       this.$axios.get(`http://localhost:9090/book/findbyISBN?ISBN=${ISBN}`,{ISBN:ISBN})
          .then(res=>{
            if(res.data.code==="200")
            {
              console.log(res.data.data[0]);
              this.gridData=res.data.data[0];
            }
            else{
              this.$message({
							message:res.data.msg,
							type:'error'
							});
            }
          })
    },
    //删除图书
    deletebyIsbn(isbn)
    {
      this.$axios.delete(`http://localhost:9090/book/${isbn}`,{ISBN:isbn})
      .then(res=>{
        if(res.data.code==="200")
        {
          this.$message({
												message:"删除成功",
												type:'success'
											});
          this.load();
        }
        else{
          	this.$message({
									message:res.data.msg,
									type:'error'
									});
        }
      })
    },
    //编辑信息
    editBook(){
        console.log(this.gridData);
        console.log(this.gridData.price+"");
        //转为int
        var isbn=parseInt(this.gridData.ISBN);
        this.$axios.post('http://localhost:9090/book/updateBook',{
            //可以直接发数组吗
               tupian:this.gridData.tupian,
               price:this.gridData.price+"",
               inventory:this.gridData.inventory,
               introduction:JSON.stringify(this.gridData.introduction),
               bname:this.gridData.bname,
               author:this.gridData.author,
               ISBN:isbn
        })
        .then(res=>{
            console.log(res);
            this.clear();
            if(res.data.code==="200")
            {
                 this.$message({
                    message:"修改成功",
                    type:"success"
                })
                this.load();
            }
            else
            {
                    this.$message({
                        message:res.data.msg,
                        type:"error"
                    })
            }
        })
    },
    //新增图书
    addBook(){
      console.log(this.addData);
        //首先判断是否所有信息都已填写
        if(this.addData.isbn!=''&&this.addData.bname!=''&&this.addData.author!='')
        {
            this.dialogAddVisible=false;
             var isbn=parseInt(this.addData.isbn);
            this.$axios.post('http://localhost:9090/book',{
               tupian:this.addData.url,//转int
               price:this.addData.price+'',
               inventory:this.addData.inventory,
               introduction:this.addData.introduction,
               bname:this.addData.bname,
               author:this.addData.author,
               ISBN:isbn
            })
            .then(res=>{
                if(res.data.code==="200")
                {
                    this.$message({
                        message:"新增成功",
                        type:"success"
                    })
                    this.load();
                    this.clear();
                }
                else{
                    this.$message({
                        message:"新增失败",
                        type:"error"
                    })
                    this.clear();
                }
            })
        }
        else{
            this.$message({
                message:"请将数据填写完整",
                type:"warning"
            })
        }
    }
  }
}
</script>

<style>
.headerBg {
  background-color: #cccccc!important;
}
.el-header {
  height: 70px !important;
}
.bread{
	margin-bottom: 20px;
}

.el-breadcrumb  /deep/  .el-breadcrumb__inner 
      {
        font-size: 30;			
    }
</style>
